今天來說說DataTable的空值樣式好了，
每次切版時，報表的部分當我以為可以快樂沿用上次修改的css時，
看到空值提示的部分就知道是自己想太美了，
有些是希望，空就空不要有任何東西
(但偏偏，DataTable就是很貼心的幫你添上了預設的空值提示)
貌似API部分也只有emptyMessage一個控制
起初我想大不了送一個null ，看起來沒用
最後，心一狠

emptyMessage={()=><></>}

可...可惡，還有一條空白...
只好用scss邪術

.p-datatable-emptymessage{
    td{
        padding:0;
    }
}

又或者是客戶想做一個有圓角的框，

emptyMessage={() =>
    <div className="mt-1 border border-secondary rounded-lg p-5 text-center">
        <span className="text-danger font-weight-bold">
            這裡沒資料...不要再重整了
        </span>
    </div>}

這一塊說難不難，說簡單也不簡單，
完全不能明白為啥一個提示可以玩那麼多花樣

那麼今天先說到這，上今天完整的code

import React from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';

const Tables2Compnent: React.FC = () => {
    return (
        <div>
            <div className="mb-3">
                <DataTable value={[]}
                    emptyMessage={() => <></>}
                >
                    <Column field="code" header="產品編號"></Column>
                    <Column field="name" header="產品名稱"></Column>
                </DataTable>
            </div>
            <div>
                <DataTable value={[]}
                    emptyMessage={() =>
                        <div className="mt-1 border border-secondary rounded-lg p-5 text-center">
                            <span className="text-danger font-weight-bold">
                                這裡沒資料...不要再重整了
                            </span>
                        </div>}
                >
                    <Column field="code" header="產品編號"></Column>
                    <Column field="name" header="產品名稱"></Column>
                </DataTable>
            </div>

        </div>

    );
}
export default Tables2Compnent;

scss的部分就只有上面那一區塊，我就不貼了

那麼...明天見!